<script setup>
import {defineEmits, defineProps, ref} from 'vue'

let currentIndex = ref(0);
const emit = defineEmits(['tabClick'])

const props = defineProps({
	titles: {
		type: Array,
		default() {
			return []
		}
	}
})
const itemClick = (index) => {
	currentIndex.value = index;
	emit('tabClick', index);
}
</script>

<template>
	<div class="tab-control">
		<div v-for="(item,index) in props.titles" :key="index" :class="{active:index === currentIndex}" class="tab-control-item" @click="itemClick(index)">
			<span>{{ item }}</span>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.tab-control {
	height: 40px;
	line-height: 40px;
	display: flex;
	text-align: center;
	font-size: 14px;
	background-color: #FFFFFF;
	width: 100%;
	position: sticky;
	top: 45px;
	z-index: 888;

	.tab-control-item {
		flex: 1;

		span {
			padding: 8px;
		}
	}

	.active {
		color: var(--color-tint);

		span {
			border-bottom: 3px solid var(--color-tint);
		}
	}
}
</style>